<template>
  <div class="mobilelist">
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <ul class="logolist">
      <li
        v-for="item in pdttype[value1]"
        :key="item.id"
        @click="getbybrand(item.bid)"
      >
        <img :src="item.logo" alt="" />
      </li>
    </ul>
    <div class="pdtlist">
      <div
        class="pdtitem"
        v-for="item in templist"
        :key="item.id"
        @click="godetail(item.id)"
      >
        <div style="min-height: 150px">
          <img v-lazy="item.img" alt="" />
        </div>
        <span class="title">{{ item.brand + item.name }}</span>
        <span class="desc">{{ item.disc }} </span>
        <span class="price"
          >售价:<i style="color: red">{{ '¥' + item.price }}</i></span
        >
      </div>
    </div>
  </div>
</template>
<script>
import { getgoodscategory, getbytype } from '@/api/index';
export default {
  data() {
    return {
      pdttype: [],
      value1: 0,
      value2: 'a',
      option1: [
        // { text: '手机', value: 0 },
        // { text: '电脑', value: 1 },
        // { text: '配件', value: 2 },
        // { text: '掌机', value: 3 },
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '价格升序', value: 'b' },
        { text: '价格降序', value: 'c' },
      ],
      pdtlist: [],
      templist: [],
    };
  },
  created() {
    this.value1 = parseInt(this.$route.params.id);
    getgoodscategory().then((res) => {
      for (let i = 0; i < res.data.data.length; i++) {
        this.option1.push({
          text: res.data.data[i].gname,
          value: i,
        });
        this.pdttype.push(res.data.data[i].children);
      }
    });

    getbytype({ gid: 1 }).then((res) => {
      this.pdtlist = this.templist = res.data.data;
      console.log(this.pdtlist);
    });
  },
  watch: {
    value1(nv) {
      getbytype({ gid: nv + 1 }).then((res) => {
        this.templist = res.data.data;
        this.pdtlist = JSON.parse(JSON.stringify(this.templist));
      });
    },
    value2(nv) {
      if (nv == 'b') {
        this.templist.sort((a, b) => {
          return parseInt(a.price) - parseInt(b.price);
        });
      }
      if (nv == 'c') {
        this.templist.sort((a, b) => {
          return parseInt(b.price) - parseInt(a.price);
        });
      }
      if (nv == 'a') {
        this.templist = this.pdtlist;
      }
    },
  },
  methods: {
    getbybrand(id) {
      this.templist = this.pdtlist;
      this.templist = this.templist.filter((item) => {
        return item.bid == id;
      });
    },
    godetail(id) {
      this.$router.push('/detail/' + id);
    },
  },
};
</script>
<style lang="scss" scoped>
.mobilelist {
  margin-top: 50px;
}
.logolist {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li {
    width: 60px;
    height: 60px;
    margin: 5px 3px;
    border-radius: 50%;
    overflow: hidden;
    // border: 1px solid black;
    line-height: 60px;
    img {
      width: 100%;
    }
  }
}
.pdtlist {
  width: 90%;
  min-height: 500px;
  margin: 0 auto 50px;
  border-radius: 10px;
  background-color: #f8f8f8;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .pdtitem {
    border-radius: 10px;
    width: 45%;
    height: 220px;
    background-color: white;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    img {
      width: 100%;
    }
    .title {
      font-weight: bolder;
      font-size: 14px;
    }
    .desc {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
